<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l load-project"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l load-project"></view>

        <view v-if="isLoad" class="main padding-project">
            <!-- parse <include src="user_form.wxml"/> -->
            <block>
                <view class="form-box shadow-project card-project">
                    <view class="form-group padding-top-s" v-if="userRegCheck && user.USER_STATUS == 8">
                        <view v-if="!user.USER_CHECK_REASON" class="hint-desc text-red">
                            <text class="icon-notice"></text>
                            审核未通过：请修改资料后重新提交
                        </view>
                        <view v-else class="hint-desc text-red">
                            <text class="icon-notice"></text>
                            审核未通过：{{ user.USER_CHECK_REASON }}。请修改资料后重新提交
                        </view>
                    </view>
                    <view class="form-group padding-top-s" v-else-if="userRegCheck && user.USER_STATUS == 0">
                        <view class="hint-desc text-orange">
                            <text class="icon-notice"></text>
                            您的注册资料已经提交，请耐心等待审核~
                        </view>
                    </view>

                    <view class="form-group">
                        <view class="title must">昵称</view>
                        <input type="nickname" placeholder="填写您的昵称" placeholder-class="phc" v-model="formName" maxlength="30" />
                    </view>
                    <view v-if="formNameFocus" class="hint-desc error">{{ formNameFocus }}</view>

                    <view class="form-group">
                        <view class="title must">手机</view>
                        <input v-if="!mobileCheck" placeholder="填写您的手机号码" placeholder-class="phc" v-model="formMobile" maxlength="11" />

                        <block v-else>
                            <view class="mobile">{{ formMobile || '未填写' }}</view>
                            <button open-type="getPhoneNumber" @getphonenumber="bindGetPhoneNumber" class="btn phone-button">
                                <text v-if="!formMobile">一键填写手机号</text>
                                <text v-else>一键修改手机号</text>
                            </button>
                        </block>
                    </view>
                    <view v-if="formMobileFocus" class="hint-desc error">{{ formMobileFocus }}</view>
                </view>

                <view class="form-box shadow-project card-project margin-top-xs">
                    <cmpt-form-show id="cmpt-form" mark="cmpt-form" :isCacheMatch="false" :fields="fields" :forms="formForms" :isDefMatch="isEdit ? false : true"></cmpt-form-show>
                </view>
            </block>
            <button @tap="bindSubmitTap" class="btn-base btn-project shadow">修改资料</button>
        </view>
    </view>
</template>

<script>
import cmptFormShow from '@/cmpts/public/form/form_show/form_show_cmpt';
const pageHelper = require('@/utils/helper/page_helper.js');
const cloudHelper = require('@/utils/helper/cloud_helper.js');
const validate = require('@/utils/helper/validate.js');
const ProjectBiz = require('@/utils/biz/project_biz.js');
const projectSetting = require('@/utils/public/project_setting.js');
const setting = require('@/utils/setting/setting.js');
const PassportBiz = require('@/utils/comm/biz/passport_biz.js');

const api = require('@/api/api.js');
export default {
    components: {
        cmptFormShow
    },
    data() {
        return {
            isLoad: false,
            isEdit: true,
            userRegCheck: projectSetting.USER_REG_CHECK,
            mobileCheck: setting.MOBILE_CHECK,

            user: {
                USER_STATUS: 0,
                USER_CHECK_REASON: ''
            },

            fields: '',
            formName: '',
            formMobile: '',
            formForms: '',
            formNameFocus: null,
            formMobileFocus: null
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        ProjectBiz.initPage(this);
        await this.loadDetailFun();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: async function () {
        await this.loadDetailFun();
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    methods: {
        loadDetailFun: async function (e) {
            let opts = {
                title: 'bar'
            };
            // let user = await cloudHelper.callCloudData('passport/my_detail', {}, opts);
            // if (!user) {
            //     return uni.redirectTo({
            //         url: '../reg/my_reg'
            //     });
            // }
            // let user = PassportBiz.getToken();
            let user = await api.userDetail();
            console.log('用户详情', user);
            this.setData({
                isLoad: true,
                isEdit: true,
                user,
                fields: projectSetting.USER_FIELDS,
                formName: user.username,
                formMobile: user.phone,
                formForms: user.forms,
                // formForms: ]
            });
            console.log('this.fields', this.fields);
        },

        bindGetPhoneNumber: async function (e) {
            await PassportBiz.getPhone(e, this);
        },

        bindSubmitTap: async function (e) {
            try {
                let data = this;
                // 数据校验
                data = validate.check(data, PassportBiz.CHECK_FORM, this);
                if (!data) {
                    return;
                }
                let forms = this.zpSelectComponent('#cmpt-form').getForms(true);
                if (!forms) {
                    return;
                }
                data.forms = forms;
                let opts = {
                    title: '提交中'
                };
                let params = {
                    id: this.user.id,
                    username: this.formName,
                    phone: this.formMobile,
                    forms: forms
                };
                let res = await api.updateUserInfo(params).then((res) => {
                    let callback = () => {
                        uni.reLaunch({
                            url: '/pages/my/index/my_index'
                        });
                    };
                    pageHelper.showSuccToast('修改成功', 1500, callback);
                });
                console.log('res', res);
                // await cloudHelper.callCloudSumbit('passport/edit_base', data, opts).then((res) => {
                //     let callback = () => {
                //         uni.reLaunch({
                //             url: '../index/my_index'
                //         });
                //     };
                //     pageHelper.showSuccToast('修改成功', 1500, callback);
                // });
            } catch (err) {
                console.log('CatchClause', err);
                console.log('CatchClause', err);
                console.error(err);
            }
        }
    }
};
</script>
<style>
@import './my_edit.css';
</style>
